import { FC, ReactElement, useEffect, memo, useState } from 'react'
import { Modal, Table } from 'antd'
import { connect, Dispatch, EvaluationStateType } from 'umi'
interface IProps {
  code: string
  visible: boolean
  hide: () => any
  dispatch: Dispatch
  evaluationModel: EvaluationStateType
}

const OrganizationPage: FC<IProps> = ({
  code,
  visible,
  hide,
  dispatch,
  evaluationModel
}): ReactElement => {
  const { organizationList } = evaluationModel
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(10)

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'batchCode',
      key: 'batchCode',
      render: (text: string, record: any, index: number) => (
        <span>
          {((pageNum - 1) * pageSize + (index + 1)).toString().padStart(2, '0')}
        </span>
      ),
      align: 'center'
    },
    {
      title: '机构名称',
      dataIndex: 'unitName',
      key: 'unitName',
      align: 'center'
    }
  ]
  const handleOk = () => {
    hide()
  }

  const handleCancel = () => {
    hide()
  }
  const handlePageChange = (page: number): void => {
    setPageNum(page)
  }
  const paginationProps = {
    current: pageNum, //当前页码
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page: number) => handlePageChange(page), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: false
  }

  //   获取参与机构信息
  const getBatchUnitInfo = (code: string) => {
    dispatch({
      type: 'evaluationModel/function_getBatchUnitInfo',
      payload: {
        code
      }
    })
  }
  useEffect(() => {
    if (!visible) {
      setPageNum(1)
      return
    }
    getBatchUnitInfo(code)
  }, [visible])

  useEffect(() => {
    setTotal(organizationList.length)
  }, [organizationList])
  return (
    <>
      <Modal
        title="参与机构"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="60%"
        okText="确认"
        cancelText="取消"
        bodyStyle={{
          height: `${window.innerHeight * 0.5}px`,
          overflowY: 'auto'
        }}
        maskClosable={false}
      >
        <Table
          dataSource={organizationList}
          columns={columns}
          rowKey="unitCode"
          pagination={paginationProps}
        />
      </Modal>
    </>
  )
}
const mapStateToProps = ({
  evaluationModel
}: {
  evaluationModel: EvaluationStateType
}) => {
  return {
    evaluationModel
  }
}

export default connect(mapStateToProps)(memo(OrganizationPage))
